<template>
	<div class="selectFilter" ref="selectFilter">
		<input
			type="text"
			:readonly="isReadonly"
			v-model="selectname"
			:placeholder="placeholdertxt"
			@click="searchFlag = !searchFlag"
			@contextmenu="contextmenu"
			@input="changeInput"
			@change="blurInput"
			@compositionstart="flag = false"
			@compositionend="flag = true"
		/>
		<a href="javascript:;" class="dropdownarrow" @click="searchFlag = !searchFlag"
			><img src="/img/down.png" :class="{ 'filter-show': searchFlag }"
		/></a>
		<div class="dropdownlist" v-if="searchFlag">
			<!-- <a-empty description="暂无数据" v-if="filterList.length == 0" /> -->
			<ul>
				<li class="vs__no-options" v-if="filterList.length == 0">没有筛选数据</li>
				<li v-for="(item, index) in filterList" :key="index" @click="choseValue(item)">
					<a href="JavaScript:;">{{ item.name }}</a>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			searchFlag: false,
			selectname: '',
			filterList: [],
			flag: true, //防止输入中文拼音的时候，触发input事件
		};
	},
	props: {
		searchList: Array,
		selectValue: Object,
		isReadonly: {
			type: Boolean,
			default: true,
		},
		placeholdertxt: {
			type: String,
			default: '请选择',
		},
	},
	watch: {
		selectValue: function (newVal, oldVal) {
			if (newVal != oldVal && this.selectValue && this.selectValue.name) {
				this.selectname = this.selectValue.name;
			}
		},
		searchList: {
			handler(a, b) {
				if (a !== b && a) {
					this.filterList = [...this.searchList];
				}
			},
			immediate: true,
			deep: true,
		},
	},
	mounted() {
		document.addEventListener('click', (e) => {
			if (this.$refs.selectFilter) {
				if (!this.$refs.selectFilter.contains(e.target)) {
					this.searchFlag = false;
				}
			} else {
				console.log(2);
			}
		});
		if (this.selectValue && this.selectValue.name) {
			this.selectname = this.selectValue.name;
		}
		this.filterList = [...this.searchList];
		/* 监听复制事件 */
		/* 主进程 通知是最小化 成功*/
		let $this = this;
		// this.$electron.ipcRenderer.on('copy', event => {
		// 	const clipboard = this.$electron.clipboard;
		// 	clipboard.writeText($this.selectname);
		// 	console.log(clipboard.readText())

		// 	// const pasteBtn = document.getElementById('paste-to')

		// 	// pasteBtn.addEventListener('click', function () {

		// 	//   const message = `粘贴的内容: ${clipboard.readText()}`
		// 	//   document.getElementById('paste-from').innerHTML = message
		// 	// })
		// });
	},
	methods: {
		choseValue(item) {
			this.searchFlag = false;
			this.selectname = item && item.name ? item.name : '';
			this.$emit('update:selectValue', item);
			this.$emit('selectFunc', item);
			this.filterList = [...this.searchList];
		},
		changeInput(e) {
			if (this.flag) {
				this.filterList = this.searchList.filter(
					(item) => item.name.toUpperCase().indexOf(e.target.value.toUpperCase()) >= 0
				);
			}
		},
		/* 失去焦点 */
		blurInput(e) {
			if (this.filterList.length > 0 && e.target.value != '') {
				this.choseValue(this.filterList[0]);
			} else {
				this.choseValue(null);
			}
		},
		contextmenu() {
			if (!this.isReadonly && this.selectname) {
				this.$electron.ipcRenderer.send('createSuspensionMenu', this.selectname);
			}
		},
	},
};
</script>

<style scoped="scoped">
	* {
		margin: 0;
	}
.selectFilter {
	position: relative;
	display: flex;
	align-items: center;
}
.selectFilter input {
	display: block;
	width: 100%;
	height: 0.6rem;
	cursor: pointer;
	padding-right: 0.5rem;
}
.dropdownarrow img {
	width: 0.36rem;
	height: 0.36rem;
}
.dropdownlist {
	position: absolute;
	border-radius: 5px;
	box-sizing: border-box;
	top: 0.85rem;
	width: 100%;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	background: #fff;
	z-index: 999;
	max-height:2.5rem;
	overflow: auto;
	line-height: 2;
}
</style>
